<template>
  <div class="mapStyle">
    <!-- <div class="footer">
      <ElButton style="margin-right: 5px" @click="resetForm()">取消</ElButton>
      <ElButton type="primary" @click="submitForm(ruleFormRef)">
        确定
      </ElButton>
    </div> -->
    <ElForm ref="ruleFormRef" :model="ruleForm" :rules="rules" class="search-color">
      <ElRow>
        <ElCol :span="24">
          <p>参考数据</p>
        </ElCol>
        <ElCol :span="24">
          <el-switch v-model="ruleForm.mode" /> <span>建筑物数据</span>
        </ElCol>
        <ElCol :span="24">
          <p>地图画质</p>
        </ElCol>
        <ElCol :span="24">
          <el-switch v-model="ruleForm.building" /> <span>高清模型</span>
        </ElCol>
        <ElCol :span="24">
          <el-switch v-model="ruleForm.road" /> <span>高清路网和标注</span>
        </ElCol>
        <ElCol :span="24">
          <p>地图底图</p>
        </ElCol>
        <ElCol :span="24" class="smallmap">
          <section style="display: flex; align-items: center; margin-top: 5px">
            <div style="
                position: relative;
                margin-right: 8px;
                border: 2px solid transparent;
                cursor: pointer;
              " @click="handleMapClick(1)" :class="{ 'map-item': mapType === 1 }">
              <img src="/static/map4.png" alt="" />
              <p class="name" :class="{ pStyle: mapType === 1 }">标准地图</p>
            </div>
            <div style="
                position: relative;
                margin-right: 8px;
                border: 2px solid transparent;
                cursor: pointer;
              " :class="{ 'map-item': mapType === 2 }" @click="handleMapClick(2)">
              <p class="show-p" v-if="mapType === 2">
                <ElCheckbox v-model="ruleForm.road1" @change="road1_change" /> <span>开启路网</span>
              </p>
              <img src="/static/map5.png" alt="" />
              <p class="name" :class="{ pStyle: mapType === 2 }">
                卫星地图-天地图
              </p>
            </div>
            <div style="
                position: relative;
                border: 2px solid transparent;
                cursor: pointer;
              " :class="{ 'map-item': mapType === 3 }" @click="handleMapClick(3)">
              <p class="show-p" v-if="mapType === 3">
                <ElCheckbox v-model="ruleForm.road2" @change="road2_change" /> <span>开启路网</span>
              </p>
              <img src="/static/map6.png" alt="" />
              <p class="name" :class="{ pStyle: mapType === 3 }">
                卫星地图-百度
              </p>
            </div>
          </section>
        </ElCol>
      </ElRow>
    </ElForm>
  </div>
</template>
<script lang="ts" setup>
import {
  ElForm,
  ElCheckbox,
  ElMessage,
  ElSwitch,
  ElRow,
  ElCol,
} from "element-plus";
import { reactive, ref, watch, toRef } from "vue";
const emit = defineEmits(["close", "mapType"]);
const props = defineProps(['mapType'])
const dialogVisible = ref(false);
const mapType = toRef(props.mapType);
const ruleFormRef = ref();
const ruleForm = ref({
  mode: true,
  building: true,
  road: true,
  volume: 0,
  road1: true,
  road2: true,
  writecontent: "",
  entercontent: "",
});

// 监听 road1 和 road2 的变化
// watch(
//   () => ruleForm.value.road1,
//   (newVal) => {
//     if (mapType.value === 2) {
//       handleMapClick(2);
//     }
//   }
// );
const road1_change = () => {
  if (mapType.value === 2) {
    handleMapClick(2);
  }
}

// watch(
//   () => ruleForm.value.road2,
//   (newVal) => {
//     if (mapType.value === 3) {
//       handleMapClick(3);
//     }
//   }
// );
const road2_change = () => {
  if (mapType.value === 3) {
    handleMapClick(3);
  }
}


const handleMapClick = (type) => {
  let data = {
    type: type,
    road:
      type == 2
        ? ruleForm.value.road1
        : type == 3
          ? ruleForm.value.road2
          : null,
  };
  emit("mapType", data);
  mapType.value = type;
};
</script>
<style scope lang="scss">
.mapStyle {
  position: absolute;
  right: 6vh;
  bottom: 0;
  z-index: 1;
  width: 400px;
  padding: 10px;
  color: #303133;
  text-align: left;
  background-color: #fff;
  border-radius: 4px;

  p {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }

  .smallmap {
    .map-item {
      box-sizing: border-box;
      border: 2px solid #1989fa !important;

      .pStyle {
        color: #fff;
        background-color: #1989fa;
      }
    }

    .name {
      position: absolute;
      right: 0;
      bottom: 0;
      padding: 0 5px;
      font-size: 12px;
      font-weight: 400;
      line-height: 22px;
      color: #fff;
    }

    .show-p {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      width: 100%;
      padding-left: 8px;
      font-size: 12px;
      font-weight: 400;
      color: #fff;
      background: rgb(0 0 0 / 50%);
    }
  }
}

.footer {
  padding: 10px;
  margin-bottom: 10px;
  text-align: right;
  border-bottom: 1px solid #dcdfe6;
}
</style>
